<template>
	<view class="cart">
		<!-- 导航栏 -->
		<view class="border-bottom " style="height: 40px;">
			<view class="position-fixed right-0  " style="line-height: 40px;"  @click="isedit = !isedit">
				{{isedit?  '编辑' :'完成'}}
				
				</view>
			
			<!-- {{cart.msg}}  测试 -->
			<view class="text-center " style="line-height: 40px;"> 购物车-</view>

		</view>

		<!-- 主题列表 -->

		<view class="cartListBox  bg-white px-2 ">
			<view class="d-flex a-center py-3 border-bottom border-light-secondary"
			v-for="(item,index) in list"  :key='index'
			
			>


				<label class="radio d-flex a-center j-center flex-shrink" style="width: 80upx;height: 80upx;">
					<!-- @click="selectItem(index)" -->
					<radio value=""  color="#FD6801"   :checked="item.checked"    @click="selectItem(index)" />

				</label>
				<image :src="item.cover" mode="widthFix" style="height: 150rpx;width: 150rpx;" class="border border-light-secondary rounded p-2 flex-shrink">
				</image>



				<view class="flex-1 d-flex flex-column pl-2">

						<view class="text-dark" style="font-size: 35upx;">
							{{item.title}}
						</view>
						<view class="d-flex text-light-muted mb-1"   @tap.stop="doShowPopup(index)"
						
						:class="isedit ? ' p-1 bg-light-secondary' : ''"
						>
							<!-- <text class="mr-1"> 火焰红 64G 标配 </text> -->
							<text class="mr-1"
							v-for="(attr,attrIndex) in item.attrs"
							:key="attrIndex">{{attr.list[attr.selected].name}}</text>

							<view class="iconfont icon-bottom font ml-auto"
						v-if="isedit"></view>
						</view>
						<view class="mt-auto d-flex j-sb">
							<price>{{item.pprice}}</price>
							<view class="a-self-end">
								<!-- num: 1,
								minnum: 1,
								maxnum: 10, // 该商品最大商品数，跟库存有关 -->
								<!-- :min="item.minnum" -->
								<!-- :value="item.num" :max="item.maxnum" -->
								<!-- @change="changeNum($event,item,index)" -->
								<uni-number-box   :min='item.minnum'    :max='item.maxnum' :value="item.num"    @change="changeNum($event,item,index)">
								</uni-number-box>
							</view>
						</view>


				</view>
			
				
				
				
				
			</view>
			
			
			
			
			<!-- 属性筛选框  :popupClass="popupShow" @hide="doHidePopup" -->
			<common-popup     :popupClass="popupShow"    @hide="doHidePopup">
				<view class="d-flex a-center" style="height: 275rpx;">
					<image src="../../static/images/demo/list/1.jpg" mode="widthFix"
					style="height: 180rpx;width: 180rpx;" class="border rounded"></image>
					<view class="pl-2">
						<price priceSize="font-lg" unitSize="font">2365</price>
						<view class="d-block"     v-for="(attr,attrIndex) in popupData.attrs"
							:key="attrIndex" >
							
						<!-- 	-->
							
							<!-- {{attr.list[attr.selected].name}} -->
							<text class="mr-1"
							>    {{attr.list[attr.selected].name}}</text>  
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="w-100" style="height: 660rpx;">
					<card :headTitle="item.title" 
					 :key="index"
					v-for="(item,index) in popupData.attrs">
						<zcm-radio-group :label="item" 
						:selected.sync='item.selected'></zcm-radio-group>
					</card>
					<view class="d-flex j-sb a-center p-2 border-top border-light-secondary">
						<text>购买数量</text>
						<uni-number-box :min="1" :value="popupData.num" @change="popupData.num = $event"></uni-number-box>
					</view>
				</scroll-view>
				 <view class="main-bg-color text-white font-md d-flex a-center j-center" hover-class="main-bg-hover-color" style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;" 
				 @tap.stop="doHidePopup">
				 	确定
				 </view>
			</common-popup>
			
			
			
			
			

		</view>



<!-- 商品结算 -->


 <view class="d-flex a-center position-fixed left-0 right-0  border-top border-light-secondary a-stretch" 
		 style="height: 100upx;z-index: 1000; bottom: 50px;">
			 <label class="radio d-flex a-center j-center flex-shrink"
			 style="width: 120upx;" >
			 <!-- @click="doSelectAll"    :checked="checkedAll" :disabled="disableSelectAll"-->
			 <!-- :checked="true/false" -->
			 	<radio color="#FD6801"    :checked='checkedAll'   @click="doSelectAll"   :disabled="disableSelectAll"   :class="disableSelectAll? 'bg-warning' :''"/>
			 </label>
			
		 <template    v-if="!isedit" >
			 	<view class="flex-1 d-flex a-center j-center font-md">
			 		合计 <price>{{totalPrice}}</price>
			 	</view>
			 	<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md" hover-class="main-bg-hover-color"> 结算</view>
			 </template>
			<template  v-else>
			 	<view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white">
			 		移入收藏
			 	</view>
			 	<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md" hover-class="main-bg-hover-color" @tap="doDelGoods">删除</view>
			 </template>
		 </view>



	</view>

	<!-- 底部按钮 -->


</template>

<script>
	import price from "@/components/common/price.vue";
	import commonPopup from "@/components/common/common-popup.vue"

	import zcmRadioGroup from "@/components/common/radio-group.vue"

	import uniNumberBox from "@/components/uni-ui/uni-number-box/uni-number-box.vue"

	import card from '@/components/common/card.vue'
	
	
	// 购物车数据处理 
	
	
	import  {mapState,mapGetters,mapActions} from 'vuex'

	export default {
		components: {
			price,
			commonPopup,
			zcmRadioGroup,
			uniNumberBox,
			card
		},
		
		
		computed:{
			...mapState({
				list:state=>state.cart.list,
				popupShow:state=>state.cart.popupShow
				// selectedList:state.cart.selectedList
			}),
			...mapGetters(['checkedAll','totalPrice','disableSelectAll','popupData'])
		}
		,
		data() {
			return {
				isedit:true
			}
		},
		// data() {
		// 	return {
			
		// 				title: "颜色",
		// 				selected: 0,
		// 				list: [{
		// 						name: "黄色"
		// 					},
		// 					{
		// 						name: "黑色"
		// 					},
		// 					{
		// 						name: "红色"
		// 					},
		// 				]
		// 			},
		// 			{
		// 				title: "容量",
		// 				selected: 0,
		// 				list: [{
		// 						name: "64GB"
		// 					},
		// 					{
		// 						name: "128GB"
		// 					},
		// 				]
		// 			},
		// 			{
		// 				title: "套餐",
		// 				selected: 0,
		// 				list: [{
		// 						name: "标配"
		// 					},
		// 					{
		// 						name: "套餐一"
		// 					},
		// 					{
		// 						name: "套餐二"
		// 					},
		// 				]
		// 			}
		// 		],

		// 	}
		// },
		methods: {
			
			...mapActions(['doSelectAll','selectItem','doDelGoods','doShowPopup','doHidePopup']),
			
			


			changeNum(e, item, index) {
				item.num = e
			}

		}
	}
</script>

<style>

</style>
